// 文件图标组件

import React from 'react';
import {
  FileText,
  Folder,
  FolderOpen,
  Package,
  BookOpen,
  Container,
  GitBranch,
  Settings,
  Key,
  Folder as FolderCode,
  FolderCheck,
  Folder as FolderX,
  Image,
  Terminal,
  Database,
  Code,
  Braces,
  Hash,
  FileCode,
  Globe,
  Palette,
  FileJson,
  BookText,
  FileX,
  Cog,
  Folder as FolderCog,
  GitBranch as FolderGit2,
  Folder as FolderOutput,
} from 'lucide-react';
import { FileItem, getFileIcon, getFolderIcon } from '../types/filesystem';

// 图标映射
const ICON_COMPONENTS = {
  // 文件类型图标
  'file-text': FileText,
  'typescript': Code,
  'javascript': Code,
  'python': FileCode,
  'rust': Cog,
  'java': FileCode,
  'cpp': FileCode,
  'c': FileCode,
  'go': FileCode,
  'html': Globe,
  'css': Palette,
  'json': FileJson,
  'markdown': BookText,
  'xml': FileCode,
  'yaml': FileCode,
  'toml': FileCode,
  'shell': Terminal,
  'sql': Database,
  
  // 文件夹图标
  'folder': Folder,
  'folder-open': FolderOpen,
  'folder-code': FolderCode,
  'folder-check': FolderCheck,
  'folder-book': BookOpen,
  'folder-cog': FolderCog,
  'folder-image': Image,
  'folder-x': FolderX,
  'folder-git': FolderGit2,
  'folder-output': FolderOutput,
  
  // 特殊文件图标
  'package': Package,
  'book-open': BookOpen,
  'container': Container,
  'git-branch': GitBranch,
  'settings': Settings,
  'key': Key,
} as const;

type IconName = keyof typeof ICON_COMPONENTS;

interface FileIconProps {
  file: FileItem;
  isExpanded?: boolean;
  size?: number;
  className?: string;
}

/**
 * 文件图标组件
 */
export const FileIcon: React.FC<FileIconProps> = ({
  file,
  isExpanded = false,
  size = 16,
  className = '',
}) => {
  // 获取图标名称
  const iconName = file.is_directory 
    ? getFolderIcon(file, isExpanded)
    : getFileIcon(file);

  // 获取图标组件
  const IconComponent = ICON_COMPONENTS[iconName as IconName] || FileText;

  // 根据文件类型设置颜色
  const getIconColor = (): string => {
    if (file.is_directory) {
      if (isExpanded) {
        return 'text-blue-500';
      }
      return 'text-blue-400';
    }

    // 根据语言设置颜色
    switch (file.language) {
      case 'typescript':
        return 'text-blue-600';
      case 'javascript':
        return 'text-yellow-500';
      case 'python':
        return 'text-green-500';
      case 'rust':
        return 'text-orange-600';
      case 'java':
        return 'text-red-500';
      case 'cpp':
      case 'c':
        return 'text-blue-700';
      case 'go':
        return 'text-cyan-500';
      case 'html':
        return 'text-orange-500';
      case 'css':
        return 'text-blue-500';
      case 'json':
        return 'text-yellow-600';
      case 'markdown':
        return 'text-gray-600';
      case 'xml':
        return 'text-green-600';
      case 'yaml':
      case 'toml':
        return 'text-purple-500';
      case 'shell':
        return 'text-green-700';
      case 'sql':
        return 'text-blue-800';
      default:
        return 'text-gray-500';
    }
  };

  // 特殊文件的颜色
  const getSpecialFileColor = (): string => {
    switch (file.name) {
      case 'package.json':
      case 'package-lock.json':
      case 'yarn.lock':
      case 'pnpm-lock.yaml':
        return 'text-green-600';
      case 'Cargo.toml':
      case 'Cargo.lock':
        return 'text-orange-600';
      case 'README.md':
        return 'text-blue-600';
      case 'LICENSE':
        return 'text-yellow-600';
      case 'Dockerfile':
        return 'text-blue-500';
      case '.gitignore':
      case '.gitattributes':
        return 'text-orange-500';
      case 'tsconfig.json':
      case 'vite.config.ts':
      case 'tailwind.config.js':
        return 'text-purple-500';
      case '.env':
      case '.env.local':
      case '.env.development':
      case '.env.production':
        return 'text-yellow-500';
      default:
        return getIconColor();
    }
  };

  const colorClass = getSpecialFileColor();

  return (
    <IconComponent
      size={size}
      className={`${colorClass} ${className}`}
      aria-hidden="true"
    />
  );
};

/**
 * 文件状态图标组件
 */
interface FileStatusIconProps {
  status: 'modified' | 'added' | 'deleted' | 'conflicted';
  size?: number;
  className?: string;
}

export const FileStatusIcon: React.FC<FileStatusIconProps> = ({
  status,
  size = 12,
  className = '',
}) => {
  const getStatusIcon = () => {
    switch (status) {
      case 'modified':
        return { icon: FileText, color: 'text-yellow-500' };
      case 'added':
        return { icon: FileText, color: 'text-green-500' };
      case 'deleted':
        return { icon: FileX, color: 'text-red-500' };
      case 'conflicted':
        return { icon: FileText, color: 'text-red-600' };
      default:
        return { icon: FileText, color: 'text-gray-500' };
    }
  };

  const { icon: IconComponent, color } = getStatusIcon();

  return (
    <IconComponent
      size={size}
      className={`${color} ${className}`}
      aria-hidden="true"
    />
  );
};

/**
 * 文件类型徽章组件
 */
interface FileTypeBadgeProps {
  file: FileItem;
  className?: string;
}

export const FileTypeBadge: React.FC<FileTypeBadgeProps> = ({
  file,
  className = '',
}) => {
  if (!file.language || file.is_directory) {
    return null;
  }

  const getBadgeColor = (): string => {
    switch (file.language) {
      case 'typescript':
        return 'bg-blue-100 text-blue-800';
      case 'javascript':
        return 'bg-yellow-100 text-yellow-800';
      case 'python':
        return 'bg-green-100 text-green-800';
      case 'rust':
        return 'bg-orange-100 text-orange-800';
      case 'java':
        return 'bg-red-100 text-red-800';
      case 'cpp':
      case 'c':
        return 'bg-blue-100 text-blue-800';
      case 'go':
        return 'bg-cyan-100 text-cyan-800';
      case 'html':
        return 'bg-orange-100 text-orange-800';
      case 'css':
        return 'bg-blue-100 text-blue-800';
      case 'json':
        return 'bg-yellow-100 text-yellow-800';
      case 'markdown':
        return 'bg-gray-100 text-gray-800';
      default:
        return 'bg-gray-100 text-gray-600';
    }
  };

  return (
    <span
      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getBadgeColor()} ${className}`}
    >
      {file.language.toUpperCase()}
    </span>
  );
};

/**
 * 文件大小指示器
 */
interface FileSizeIndicatorProps {
  size?: number;
  className?: string;
}

export const FileSizeIndicator: React.FC<FileSizeIndicatorProps> = ({
  size,
  className = '',
}) => {
  if (!size) return null;

  const formatSize = (bytes: number): string => {
    const units = ['B', 'KB', 'MB', 'GB'];
    let fileSize = bytes;
    let unitIndex = 0;

    while (fileSize >= 1024 && unitIndex < units.length - 1) {
      fileSize /= 1024;
      unitIndex++;
    }

    return `${fileSize.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
  };

  const getSizeColor = (): string => {
    if (size > 10 * 1024 * 1024) { // > 10MB
      return 'text-red-500';
    } else if (size > 1024 * 1024) { // > 1MB
      return 'text-yellow-500';
    } else {
      return 'text-gray-500';
    }
  };

  return (
    <span className={`text-xs ${getSizeColor()} ${className}`}>
      {formatSize(size)}
    </span>
  );
};
